import {
  getListPage,
  createRow,
  updateRow,
  deleteRow,
  // deleteBatch,
  systemList
} from '@/api/service'
import {
  UploaderImage,
  Kindeditor
} from '@/layout/components'
import {
  get_img_src
} from '@/utils/index.js'
import {
  formRules
} from './config.js'

export default {
  components: {
    UploaderImage,
    Kindeditor
  },
  filters: { // 字段转换
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      empty_text: '暂无数据',
      listPages: { // 分页参数
        page: 1,
        size: 10,
        sizes: [5, 10, 15, 20, 30, 50, 100],
        total: 0
      },
      listParam: { // 列表查询参数
        page: 1,
        pageSize: 1
      },
      datas: null, // 列表数据
      listLoading: true,
      formDialog: { // 表单弹框
        visible: false,
        action: '',
        title: '提示',
        width: '60%',
        center: true
      },
      formLabelWidth: '120px',
      formData: { // 新增或修改保存数据
        id: null,
        commodityName: '', // 系统名称
        commodityType: '',
        projectId: '',
        commodityRole: '',
        beOverdue: null,
        price: '1.00',
        commodityImgurl: '',
        content: ''
      },
      rules: formRules,
      optionsUploaderImage: { // 图片上传组件参数
        imageUrl: ''
      },
      systemList: [], // 服务系统类型列表
      keys: { // 组件标识
        UploaderImage: new Date().getTime() + Math.random(),
        Kindeditor: new Date().getTime() + Math.random()
      }
    }
  },
  created() {
    this._fetchData()
    this._systemList()
  },
  watch: { // 监听参数
    listParam: {
      handler() {
        this._fetchData()
      },
      deep: true
    },
    listPages: {
      handler() {
        this._fetchData()
      },
      deep: true
    }
  },
  methods: {
    _fetchData() {
      this.listLoading = true
      this.listParam.page = this.listPages.page
      this.listParam.pageSize = this.listPages.size
      getListPage(this.listParam).then(response => { // 获取列表数据
        this.datas = response.result.list
        this.listPages.total = response.result.total
        this.listLoading = false
      })
    },
    _systemList() { // 获取服务系统类型列表
      systemList({
        pagesize: 50
      }).then(response => {
        // console.log(response)
        this.systemList = response.result
        // this.datas = response.result.list
        // this.listParam.total = response.result.total
        // this.listLoading = false
      })
    },
    _get_img_src(src) { // 获取组装图片地址
      return get_img_src(src)
    },
    _page_size_change(size) { // 每页条数改变
      // console.log(`每页 ${size} 条`)
      this.listPages.size = size
    },
    _page_prev_click() { // 上一页
      this.listPages.page--
    },
    _page_current_change(page) { // 当前页
      // console.log(`当前页: ${page}`)
      this.listPages.page = page
    },
    _page_next_click() { // 下一页
      this.listPages.page++
    },
    _fromUploaderImage(path) { // 回调上传地址
      console.log(path)
      this.formData.commodityImgurl = path
    },
    _fromKindeditor(data) { // 回调编辑器内容
      // console.log(data)
      this.formData.content = data
    },
    _formDialogConfirm() { // 表单确认提交
      // console.log(this.formDialog)
      this.$refs.serviceForm.validate((valid) => {
        if (valid) {
          this.formDialog.visible = false
          switch (this.formDialog.action) {
            case 'add':
              this._createRow()
              break
            case 'edit':
              this._updateRow()
              break
            default:
              break
          }
        }
      })
    },
    createRow() { // 组装创建数据
      this.formDialog.visible = true
      this.formDialog.title = '新增'
      this.formDialog.action = 'add'
      this.optionsUploaderImage.imageUrl = ''
      this.formData = { // 新增或修改保存数据
        id: null,
        commodityName: '', // 系统名称
        commodityType: '',
        projectId: '',
        commodityRole: '',
        beOverdue: null,
        price: '0.00',
        commodityImgurl: '',
        content: ''
      }
      this.keys.UploaderImage = new Date().getTime()
      this.keys.Kindeditor = new Date().getTime()
    },
    _createRow() {
      createRow(this.formData).then(response => { // 提交创建服务数据
        if (response.code === 200 || response.code === 20000) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.formDialog.visible = false
          this._fetchData()
        } else {
          this.$message({
            type: 'warning',
            message: response.msg
          })
        }
      })
    },
    _updateRow() {
      updateRow(this.formData).then(response => { // 提交更新服务数据
        if (response.code === 200 || response.code === 20000) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this._fetchData()
        } else {
          this.$message({
            type: 'info',
            message: '操作失败'
          })
        }
      })
    },
    updateRow(row) { // 组装更新数据
      this.formDialog.visible = true
      this.formDialog.title = '编辑'
      this.formDialog.action = 'edit'
      Number(row.beOverdue) === 1 ? row.price = 0 : row.price
      this.formData = { // 新增或修改保存数据
        id: row.id,
        commodityName: row.commodityName, // 系统名称
        commodityType: row.commodityType,
        projectId: row.projectId,
        commodityRole: row.commodityRole,
        beOverdue: Number(row.beOverdue),
        price: row.price,
        commodityImgurl: row.commodityImgurl,
        content: row.content
      }
      this.optionsUploaderImage.imageUrl = this._get_img_src(row.commodityImgurl)
      this.keys.UploaderImage = new Date().getTime()
      this.keys.Kindeditor = new Date().getTime()
    },
    detailRow(row) {
      this.formDialog.visible = true
      this.formDialog.title = '查看'
      this.formDialog.action = 'detail'
      // this.formData = row
    },
    deleteRow(row, index) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((result) => {
        deleteRow({
          id: row.id
        }).then(response => {
          if (response.code === 200 || response.code === 20000) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this._fetchData()
          } else {
            this.$message({
              type: 'info',
              message: '操作失败'
            })
          }
        })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '删除取消'
        // })
      })
    },
    deleteBatch() {

    },
    backUploaderImage(path) {
      this.formData.commodityImgurl = path
    }
  }
}
